<template>
    <view class="pages">
		<view class="item"><text class="text">订单编号：</text>{{orderModel.orderSn}}</view>
		<view class="item"><text class="text">下单时间：</text>{{orderModel.createTime}}</view>
		<view class="item">
			<text class="text">订单状态：</text>
			<text :style="{color: getStatus(orderModel).color}">{{getStatus(orderModel).name}}</text>
		</view>
		<view class="item"><text class="text">影院名称：</text>{{orderModel.cinemaName}}</view>
		<view class="item"><text class="text">影片名称：</text>{{orderModel.filmName}}</view>
		<view class="item"><text class="text">开场时间：</text>{{orderModel.startTime}}</view>
		<view class="item"><text class="text">结束时间：</text>{{orderModel.endTime}}</view>
		<view class="item"><text class="text">座位信息：</text>{{orderModel.seats}}</view>
		<view class="item" v-if="orderModel.codes && orderModel.orderStatus == 2">
			<text class="text">凭码取票：</text>{{orderModel.codes}}
		</view>
		<view class="item" v-if="orderModel.remark">
			<text class="text">订单备注：</text>{{orderModel.remark}}
		</view>
		<view class="item">
			<text class="text">订单金额：</text>
			<text style="color: #f54d4d">￥{{orderModel.orderAmount}}</text>
		</view>
		<view class="item">
			<text class="text">付款金额：</text>
			<text style="color: #f54d4d">￥{{orderModel.payAmount}}</text>
		</view>
		<view class="item" v-if="orderModel.codes && orderModel.orderStatus == 2">
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value="orderModel.codes" :options="{ margin: 10 }"></uqrcode>
		</view>
    </view>
</template>

<script>
import { getOrderInfo } from '@/sub_pages/movie/common/api/movie.js';
import service from '../order-list/service.js';
export default {
    data() {
        return {
            orderModel: {},
            isSync: true,
        };
    },
    computed: {
        cinemaModel() {
            return this.orderModel?.orderDetail ?? {};
        },
        seatsList() {
            let list = [];
            if (this.cinemaModel.seats) {
                list = this.cinemaModel.seats.split(',') || [];
            }
            return [];
        },
    },
    onLoad(e) {
        this.init(e);
    },
    methods: {
        async init(e) {
            let para = {
                id: e.orderId,
            };
            const res = await getOrderInfo(para);
            this.orderModel = res.data || {};
            this.isSync = false;
        },
        copyChange(data) {
            uni.setClipboardData({
                data,
                success: () => {
                    uni.showToast({ title: '复制成功', icon: 'none' });
                },
                fail(err) {
                    console.log('复制失败-err: ', err);
                },
            });
        },
        topsChange() {
            this.isSync = true;
            const { id: orderId } = this.orderModel.order;
            this.orderModel.order = null;
            this.init({ orderId });
        },
		getStatus(e) {
		    return service.getStatus(e);
		},
    },
};
</script>

<style>
	page {
		background-color: #f6f6f6 !important;
	}
</style>
<style lang="scss" scoped>
	.pages {
		padding: 20rpx;
		font-size: 28rpx;
		margin: 30rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
	}
	.item {
		padding-bottom: 16rpx;
	}
	.text {
		font-weight: bold;
	}
</style>
